<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			* {
				box-sizing: border-box;
				margin: 0;
				list-style: none;
				padding: 0;
			}

			strong {
				margin: 10px !important;
				color: red;
				font-weight: bolder;
			}

			input:active {
				border: none;
				outline: none;
			}

			input:hover {
				border: none;
				outline: none;
			}

			input:focus {
				border: none;
				outline: none;
			}

			div {
				--bc: red;
			}

			#d1 {
				/* 				--bc:red; */
			}

			#d2 {
				width: 50px;
				height: 50px;
				background-color: var(--bc);
			}

			.bk {
				background-color: orange !important;
			}

			#minput {
				border: none;
				text-align: left;
				letter-spacing: 10px;
				font-size: 25px;
				width: 100px;
				height: 50px;
				line-height: 50px;
			}

			#mul {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				width: 100px;
				height: 5px;
			}

			#mul>li {
				display: block;
				-webkit-flex: 1;
				height: 1px;
				flex: 1;
				background: red;
				margin: 0;
				border-left: 1px solid white;
			}


			/*  */
			#minputt2 {
				margin-top: 20px;
				width: 100px;
				height: 40px;
			}

			#minput2 {
				width: 100px;
				height: 40px;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-around;
			}

			.minput2-sub {
				border-bottom: 1px solid #bdbdbd;
				width: 24%;
				line-height: 40px;
				text-align: center;
			}







			#minput_2 {
				opacity: 0;
				/* position: absolute; */
				margin-left: 0px;
				width: 100px;
				height: 40px;
				background-color: red;
				position: absolute;
			}
		</style>
		<title></title>
	</head>
	<body style="padding-left: 20px;">
		<strong> 1. VUE三元 & input 不隐藏</strong>
		<div id="d1">
			<!-- 	<div id="d2" :class="{'bk':classV > 3 }"> -->
			<div id="d2" :class="[classV>3?'bk':'']">

			</div>
		</div>
		<input type="password" name="" id="minput" value="1234" maxlength="4" />
		<ul id="mul">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<strong> 2. input 不隐藏</strong>
		<div id="minputt2">
			<div id="minput2">

				<input type="text" name="" id="minput_2" value="" v-model="inputss" />
				<div class="minput2-sub">
					{{inputs.substr(0,1)}}
				</div>
				<div class="minput2-sub">
					{{inputs.substr(1,1)}}
				</div>
				<div class="minput2-sub">
					{{inputs.substr(2,1)}}
				</div>
				<div class="minput2-sub">
					{{inputs.substr(3,1)}}
				</div>
			</div>

			<!-- <input type="text" name="" id="minput_2" value="" v-model="inputss" /> -->
		</div>

		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// (function() {
			// 	console.log("123");
			// })();


			! function(p) {
				console.log(p);
			}("123");

			for (var n in "123") console.log(n);
			// 
			var kuozhan = document.createElement('h2');
			kuozhan.innerText = "\n\n3.对象扩展符";
			document.getElementsByTagName("body")[0].appendChild(kuozhan)
			const OBJ = {
				"log": par => console.log(`--- ${par + 1}`),
				"hasFunc": true,
				key: "value"
			};
			const FUNC = function(keyName) {
				let tempOBJ = OBJ;
				if (keyName) {
					for (let k in OBJ) {
						if (keyName == k) {
							// console.log(" -- k " + k);
							delete tempOBJ[k];
						}
					}
				}
				// console.log(" -- k " + JSON.stringify(tempOBJ));
				return tempOBJ
			}
			console.log(JSON.stringify(OBJ));
			kuozhan.innerText = kuozhan.innerText + "\n" + JSON.stringify(OBJ);
			const OBJ1 = {
				// ...OBJ,
				...FUNC("key"),
				name: "name 1"
			}
			console.log(JSON.stringify(OBJ1));
			kuozhan.innerText = kuozhan.innerText + "\n" + JSON.stringify(OBJ1);



			// 计算属性命名
			console.log("\n\n\n");
			var jisuan = document.createElement('h2');
			jisuan.innerText = "\n\n4.计算属性命名\n\n";
			document.getElementsByTagName("body")[0].appendChild(jisuan)

			const JSSS = {
				log(par) {
					console.log(`计算属性命名 ${par}`);
				},
				sayHi() {
					console.log(" HI ~");
				}
			}

			JSSS.log("123");
			JSSS.sayHi();

			var jscode = document.createElement("code");
			jscode.innerText =
				`console.log("\n\n\n");
			var jisuan = document.createElement('h2');
			jisuan.innerText = "\n\n计算属性命名";
			document.getElementsByTagName("body")[0].appendChild(jisuan)

			const JSSS = {
				log(par) {
					console.log(\`计算属性命名 \${par}\`);
				},
				sayHi() {
					console.log(" HI ~");
				}
			}

			JSSS.log("123");
			JSSS.sayHi();
			
			`
			document.getElementsByTagName("body")[0].appendChild(jscode);

			const myarr = ["1", "2"];
			const [...array1] = myarr;
			console.log(array1);
		</script>
		<!--  -->
		<script type="text/javascript">
			let bol = true;

			function log1(par) {
				console.log(par)
			};
			
			bol && (log1("this is a log"));
		</script>
		<!--  -->
		<script type="text/javascript">
			new Vue({
				// el: "#d1",
				el: "#minput2",
				data: {
					inputss: "1234"
				},
				computed: {
					inputs: function() {
						console.log("-  - ")
						if (this.inputss.length >= 4) {
							let val = this.inputss.substr(0, 4);
							this.inputss = val;
							return val;
						} else {
							switch (this.inputss.length) {
								case 1:
									return this.inputss + "   ";
									break;
								case 2:
									return this.inputss + "  ";
									break;
								case 3:
									return this.inputss + " ";
									break;
								default:
									return this.inputss;
									break;
							}

						}

					}
				}
			})
		</script>
	</body>
</html>